import React,{useState} from 'react'
import "./index.css"
export default function Item({ todo, done , id, setTodoList, todoList}) {

  
  const [isActive,setIsActive]=useState(false)

 //鼠标移入移出的事件函数
  const mouseHandle =(bool)=>{
    //外层函数用来接收参数,返回的函数是真正的事件函数   
    return ()=>{
      setIsActive(bool)
    }
  }

  //多选框触发改变的事件函数
  const checkChangeHandle = (e) =>{
    const newTodo =todoList.map(item =>{
      if(item.id===id){
        item.done=e.target.checked
      }
      return item
    })
    setTodoList(newTodo)
  }
 
  return (
    <li onMouseEnter={mouseHandle(true)} onMouseLeave={mouseHandle(false)} className={isActive ? "active" : ""}>
      <label>
        <input type="checkbox" checked={done} onChange={checkChangeHandle}/>
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" style={{ display:  isActive ? "block" : "none" }}>删除</button>
    </li>
  )
}
